﻿<!DOCTYPE html>
<html>
<head>
    <title>Search your favourite movies now!</title>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="MovieProcessingLogics.js"></script>
    <link href="UIStyles.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
    <div style="text-align:center">
        <h1>Find my movies!</h1>
        <p>Get all details of your favourite movies right here!</p>
    </div>
    <div id="userInput">
        <label for="searchbox">Movie title</label>
        <input type="text" id="searchBox" />
        <input type="button" value="Search" onclick="searchBtnOnClickHandler()" />
    </div>
    <div id="movieDetails">
        <table class="CustomTableStyle">
            <tr><td>Title</td><td><span id="title"></span></td></tr>
            <tr><td>Year</td><td><span id="year"></span></td></tr>
            <tr><td>Genre</td><td><span id="genre"></span></td></tr>
            <tr><td>Actors</td><td><span id="actors"></span></td></tr>
            <tr><td>Plot</td><td><span id="plot"></span></td></tr>
            <tr><td>Duration</td><td><span id="duration"></span></td></tr>
            <tr><td>Language</td><td><span id="language"></span></td></tr>
            <tr><td>IMDB rating</td><td><span id="imdbRating"></span></td></tr>
            <tr><td colspan="2" style="text-align:center"><img id="poster" src="" /></td></tr>
        </table>
    </div>
</body>
</html>
